<template>
  <div style="height: 100%">
    <el-container class="inner-container">
      <el-header>
        <p class="title f16">预算报价详情明细</p>
        <div>
          <el-button type="info" @click="openzoneSettingModal">空间尺寸数据设置</el-button>
          <el-button
            type="info"
            @click="
              () => {
                $router.push({ path: '/quote-price/following' });
              }
            "
          >
            返回上一页
          </el-button>
        </div>
      </el-header>
      <el-container v-loading="loading">
        <el-aside width="200px">
          <p class="title">空间（{{ spaceList.length }}）</p>
          <el-anchor
            class="space-list"
            :container="containerRef"
            direction="vertical"
            type="default"
            :offset="80"
            @click="handleClick"
          >
            <el-anchor-link class="space-item" v-for="(item, index) in spaceList" :key="index" :href="'#space' + item.spaceId">
              <span class="text-over" :title="item.spaceName">{{ item.spaceName || "-" }}</span>
              <el-popover placement="bottom" title="" :width="200" trigger="hover" :popper-class="'space-actionmore'">
                <template #default>
                  <div class="action-wrap">
                    <p>
                      <el-button
                        type="primary"
                        link
                        @click="
                          () => {
                            isOpenEdit = true;
                            optionInfoEdit.detail = { ...item, name: item.spaceName };
                            optionInfoEdit.submitFun = spaceQueryUpdateNameFun;
                          }
                        "
                        >编辑</el-button
                      >
                    </p>
                    <p>
                      <el-button
                        type="primary"
                        link
                        @click="
                          () => {
                            currSpaceDelCopy = { ...item };
                            spaceQueryCopyFun();
                          }
                        "
                        >复制</el-button
                      >
                    </p>
                    <p>
                      <el-button
                        type="danger"
                        link
                        @click="
                          () => {
                            _isOpenDel = true;
                            currSpaceDelCopy = { ...item };
                          }
                        "
                        >删除</el-button
                      >
                    </p>
                  </div>
                </template>
                <template #reference>
                  <el-button type="primary" link
                    ><el-icon><MoreFilled /></el-icon
                  ></el-button>
                </template>
              </el-popover>
            </el-anchor-link>
          </el-anchor>
          <p class="title">综合项（{{ allrounList.length }}）</p>
        </el-aside>
        <el-main
          :class="{
            pb155: DETAIL.isConcludeAmount === 1 && props.optionInfo.currTempObj.budgetType === 1,
            pb175: DETAIL.isConcludeAmount === 1 && props.optionInfo.currTempObj.budgetType === 2,
            pb110: DETAIL.isConcludeAmount !== 1 && props.optionInfo.currTempObj.budgetType === 1,
            pb130: DETAIL.isConcludeAmount !== 1 && props.optionInfo.currTempObj.budgetType === 2
          }"
        >
          <template v-if="JSON.stringify(optionInfo.currTempObj) !== '{}'">
            <!-- 各个空间的详细明细table -->
            <div class="table-wrap" ref="containerRef">
              <div
                class="table-item space-table"
                ref="tableRef"
                :id="'space' + item.spaceId"
                v-for="(item, index) in spaceList"
                :key="index"
              >
                <header>
                  <p class="title">
                    {{ item.spaceName || "-" }}
                  </p>
                  <div class="btn-wrap">
                    <el-button type="primary" link @click="openSelectProd(item)">
                      材料<img src="@/assets/images/download-icon.png" alt="" class="ml8" />
                    </el-button>
                    <el-divider direction="vertical" />
                    <el-button type="primary" link @click="openQuota(item)">
                      定额<img src="@/assets/images/download-icon.png" alt="" class="ml8" />
                    </el-button>
                    <el-divider direction="vertical" />
                    <el-button type="primary" link @click="inventoryAddCustomFun(item, 'space' + item.spaceId)">
                      自定义定额
                    </el-button>
                  </div>
                </header>
                <el-table
                  class="jzt-table"
                  ref="spaceTableRef"
                  :data="item.spaceQuotaList"
                  stripe
                  style="width: 100%; max-height: 800px; overflow-y: auto"
                >
                  <template #empty>
                    <el-empty description="这里暂时什么都没有" />
                  </template>
                  <el-table-column fixed label="序号" type="index" width="60" />
                  <el-table-column fixed prop="date" label="工程项目名称" width="200">
                    <template #default="scope">
                      <el-input
                        maxlength="20"
                        v-if="scope.row.quotaType === 3"
                        v-model="scope.row.quotaName"
                        placeholder="请输入"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      ></el-input>
                      <p class="text-over" :title="scope.row.quotaName" v-else>
                        {{ scope.row.quotaName || "-" }}
                      </p>
                      <template v-if="scope.row.showSign === 1">
                        <el-button v-show="scope.row.quotaType === 1" type="warning" link class="ml0 f12 tips" style="padding: 0"
                          >常规定额</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 2" type="warning" link class="ml0 f12 tips" style="padding: 0"
                          >虚拟定额</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 3" type="warning" link class="ml0 f12 tips" style="padding: 0"
                          >自定义定额</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 4" type="success" link class="ml0 f12 tips" style="padding: 0"
                          >新增主材</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 5" type="success" link class="ml0 f12 tips" style="padding: 0"
                          >新增辅材</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 6" type="success" link class="ml0 f12 tips" style="padding: 0"
                          >新增定额</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 7" type="success" link class="ml0 f12 tips" style="padding: 0"
                          >个性化定额</el-button
                        >
                        <el-button v-show="scope.row.quotaType === 8" type="warning" link class="ml0 f12 tips" style="padding: 0"
                          >个性化材料</el-button
                        >
                      </template>
                    </template>
                  </el-table-column>

                  <el-table-column prop="date" show-overflow-tooltip label="工艺材料及说明" width="200">
                    <template #default="scope">
                      <el-button type="primary" class="underline" link @click="openMaterialDialog(scope.row)">
                        <p class="text-over" style="max-width: 170px">{{ scope.row.standardDesc || "-" }}</p>
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="bindNames" show-overflow-tooltip label="品牌" width="200">
                    <template #default="scope">
                      <el-input
                        v-if="scope.row.quotaType === 3"
                        v-model="scope.row.bindNames"
                        placeholder="请输入"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      ></el-input>
                      <p v-else>{{ scope.row.bindNames || "-" }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="modelNames" show-overflow-tooltip label="型号" width="200">
                    <template #default="scope">
                      <el-input
                        v-if="scope.row.quotaType === 3"
                        v-model="scope.row.modelNames"
                        placeholder="请输入"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      ></el-input>
                      <p v-else>{{ scope.row.modelNames || "-" }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit" show-overflow-tooltip label="单位" width="200">
                    <template #default="scope">
                      <el-select
                        v-show="scope.row.quotaType === 3"
                        v-model="scope.row.unit"
                        placeholder="请选择"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      >
                        <el-option
                          v-for="item in unitList"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue"
                        />
                      </el-select>

                      <p v-show="scope.row.quotaType !== 3">
                        {{ useCodeArrStore().getDictName("shop_unit", scope.row.unit) || "-" }}
                      </p>
                    </template>
                  </el-table-column>
                  <!-- 耗损率单独显示成一列，并且只能是常规清单的时候 -->
                  <el-table-column
                    prop="lostRate"
                    v-if="DETAIL.isShowLost === 1 && props.optionInfo.currTempObj.budgetType === 1"
                    label="耗损率"
                    width="140"
                  >
                    <template #default="scope">
                      <el-input
                        placeholder="请输入"
                        v-model="scope.row.lostRate"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                        @change="
                          () => {
                            if (Number(scope.row.lostRate) >= 100 || Number(scope.row.lostRate) === 0) {
                              ElMessage({
                                message: '耗损率必须大于0小于100',
                                type: 'error'
                              });
                              refresh();
                            } else {
                              updateCustomerSpaceQuotaFun(scope.row);
                            }
                          }
                        "
                      >
                        <template #suffix>%</template>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="材料费" v-if="props.optionInfo.currTempObj.budgetType === 1">
                    <el-table-column v-if="DETAIL.isShowMainProduct === 1" prop="name" label="主材及软装其他" width="200">
                      <template #default="scope">
                        <!-- 可输入 -->
                        <template v-if="scope.row.availuableMainProductFee === 1">
                          <div class="flex-wrap">
                            <div>
                              <img
                                v-if="scope.row.mainProductShowType === 2"
                                class="type-icon"
                                src="@/assets/images/zuhe-icon.png"
                                alt=""
                              />
                              <img
                                v-else-if="scope.row.mainProductShowType === 1"
                                class="type-icon"
                                src="@/assets/images/guding-icon.png"
                                alt=""
                              />
                            </div>
                            <div>
                              <el-input
                                v-model="scope.row.mainQuoteMoney"
                                placeholder="请输入"
                                @change="updateCustomerSpaceQuotaFun(scope.row)"
                                style="width: 140px"
                              >
                                <template #prefix>¥</template>
                              </el-input>
                            </div>
                          </div>
                        </template>
                        <!-- 不可输入 -->
                        <div v-else class="flex-wrap">
                          <div>
                            <img
                              v-if="scope.row.mainProductShowType === 2"
                              class="type-icon"
                              src="@/assets/images/zuhe-icon.png"
                              alt=""
                            />
                            <img
                              v-else-if="scope.row.mainProductShowType === 1"
                              class="type-icon"
                              src="@/assets/images/guding-icon.png"
                              alt=""
                            />
                          </div>
                          <div>
                            <!-- 可点击查看明细 quotaType === 1-常规定额  6-新增定额 -->
                            <el-button
                              class="underline"
                              v-if="scope.row.quotaType === 1 || scope.row.quotaType === 6"
                              type="primary"
                              link
                              @click="openCailiaoDialog(scope.row, 1)"
                            >
                              ¥{{ scope.row.mainQuoteMoney || "-" }}
                            </el-button>
                            <!-- 单纯的文案 -->
                            <p v-else>¥{{ scope.row.mainQuoteMoney || "-" }}</p>
                            <!-- 增减项 -->
                            <el-button
                              v-if="scope.row.mainChangeMoney"
                              class="f12 mt4 tips"
                              :type="scope.row.mainChangeMoney < 0 ? 'danger' : 'success'"
                              link
                              style="padding: 0; margin-left: 0"
                            >
                              ¥{{ scope.row.mainChangeMoney || "-" }}
                            </el-button>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="辅材" width="200">
                      <template #default="scope">
                        <!-- 可输入 -->
                        <template v-if="scope.row.availuableAuxiliaryQuoteFee === 1">
                          <div class="flex-wrap">
                            <div>
                              <img
                                v-if="scope.row.auxiliaryProductShowType === 2"
                                class="type-icon"
                                src="@/assets/images/zuhe-icon.png"
                                alt=""
                              />
                              <img
                                v-else-if="scope.row.auxiliaryProductShowType === 1"
                                class="type-icon"
                                src="@/assets/images/guding-icon.png"
                                alt=""
                              />
                            </div>
                            <div>
                              <el-input
                                v-model="scope.row.auxiliaryQuoteMoney"
                                placeholder="请输入"
                                @change="updateCustomerSpaceQuotaFun(scope.row)"
                                style="width: 140px"
                              >
                                <template #prefix>¥</template>
                              </el-input>
                            </div>
                          </div>
                        </template>

                        <!-- 不可输入 -->
                        <div v-else class="flex-wrap">
                          <div>
                            <img
                              v-if="scope.row.auxiliaryProductShowType === 2"
                              class="type-icon"
                              src="@/assets/images/zuhe-icon.png"
                              alt=""
                            />
                            <img
                              v-else-if="scope.row.auxiliaryProductShowType === 1"
                              class="type-icon"
                              src="@/assets/images/guding-icon.png"
                              alt=""
                            />
                          </div>
                          <div>
                            <!-- 可点击查看明细 quotaType === 1-常规定额  2-新增定额 -->
                            <el-button
                              class="underline"
                              v-if="scope.row.quotaType === 1 || scope.row.quotaType === 6"
                              type="primary"
                              link
                              @click="openCailiaoDialog(scope.row, 2)"
                            >
                              ¥{{ scope.row.auxiliaryQuoteMoney || "-" }}
                            </el-button>
                            <!-- 单纯的文案 -->
                            <p v-else>¥{{ scope.row.auxiliaryQuoteMoney || "-" }}</p>
                            <!-- 增减项 -->
                            <el-button
                              v-if="scope.row.auxiliaryChangeMoney"
                              class="f12 mt4 tips"
                              :type="scope.row.auxiliaryChangeMoney < 0 ? 'danger' : 'success'"
                              link
                              style="padding: 0; margin-left: 0"
                            >
                              ¥{{ scope.row.auxiliaryChangeMoney || "-" }}
                            </el-button>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column
                    prop="workerQuoteMoney"
                    show-overflow-tooltip
                    label="人工费"
                    width="135"
                    v-if="props.optionInfo.currTempObj.budgetType === 1"
                  >
                    <template #default="scope">
                      <!-- 可输入 -->
                      <template v-if="scope.row.availuableWorkerFee === 1">
                        <el-input
                          v-model="scope.row.workerQuoteMoney"
                          placeholder="请输入"
                          @change="updateCustomerSpaceQuotaFun(scope.row)"
                        >
                          <template #prefix>¥</template>
                        </el-input>
                      </template>

                      <!-- 不可输入 -->
                      <template v-else>
                        <!-- 可点击查看明细 quotaType === 1-常规定额  2-新增定额 -->
                        <el-button
                          v-if="scope.row.quotaType === 1 || scope.row.quotaType === 6"
                          class="underline"
                          type="primary"
                          link
                          @click="openArtificialDialog(scope.row)"
                        >
                          ¥{{ scope.row.workerQuoteMoney || "-" }}
                        </el-button>

                        <!-- 单纯的文案 -->
                        <p v-else>¥{{ scope.row.workerQuoteMoney || "-" }}</p>
                      </template>
                    </template>
                  </el-table-column>
                  <!-- 常规 -->
                  <el-table-column
                    prop="unitTotalMoney"
                    v-if="props.optionInfo.currTempObj.budgetType === 1"
                    show-overflow-tooltip
                    label="单价"
                    width="135"
                  >
                    <template #default="scope">
                      <!-- 可输入 -->
                      <el-input
                        v-if="scope.row.availuableUnitTotalFee === 1"
                        placeholder="请输入"
                        v-model="scope.row.unitTotalMoney"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      >
                        <template #prefix>¥</template>
                      </el-input>

                      <!-- 不可输入 -->
                      <p v-else>¥{{ scope.row.unitTotalMoney }}</p>
                    </template>
                  </el-table-column>
                  <!-- 套餐 -->
                  <el-table-column
                    prop="unitTotalMoney"
                    v-if="props.optionInfo.currTempObj.budgetType === 2"
                    label="单价"
                    width="360"
                  >
                    <template #default="scope">
                      <!-- 自定义定额quotaType === 3 可输入 -->
                      <template v-if="scope.row.quotaType === 3">
                        <span v-if="scope.row.unitTotalMoney === '0.00'" style="color: #86909c">¥0.00</span>
                        <span v-else style="color: #ff3333">¥{{ scope.row.unitTotalMoney }}</span>
                        <el-input
                          class="mb4"
                          placeholder="主材报价总额"
                          v-model="scope.row.mainQuoteMoney"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          @change="updateCustomerSpaceQuotaFun(scope.row)"
                        >
                          <template #prefix>主材：¥</template>
                        </el-input>

                        <el-input
                          class="mb4"
                          placeholder="辅材报价总额"
                          v-model="scope.row.auxiliaryQuoteMoney"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          @change="updateCustomerSpaceQuotaFun(scope.row)"
                        >
                          <template #prefix>辅材：¥</template>
                        </el-input>

                        <el-input
                          placeholder="人工报价总额"
                          v-model="scope.row.workerQuoteMoney"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          @change="updateCustomerSpaceQuotaFun(scope.row)"
                        >
                          <template #prefix>人工：¥</template>
                        </el-input>
                      </template>
                      <!-- 不可输入 -->
                      <div v-else style="display: flex; align-items: center">
                        <span v-if="scope.row.unitTotalMoney === '0.00'" style="color: #86909c">¥0.00</span>
                        <span v-else style="color: #ff3333">¥{{ scope.row.unitTotalMoney }}</span>
                        <el-button
                          v-if="DETAIL.isShowMainProduct === 1"
                          class="ml10 underline"
                          type="primary"
                          link
                          @click="openCailiaoDialog(scope.row, 1)"
                        >
                          主材（{{ scope.row.mainProductNum }}）
                          <!-- （{{ scope.row.mainQuoteMoney }}） -->
                        </el-button>
                        <el-button class="ml10 underline" type="primary" link @click="openCailiaoDialog(scope.row, 2)">
                          辅材（{{ scope.row.auxiliaryProductNum }}）
                        </el-button>
                        <el-button class="ml10 underline" type="primary" link @click="openArtificialDialog(scope.row)">
                          人工（{{ scope.row.workerNum }}）
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="projectTotalMoney" show-overflow-tooltip label="合计" width="135">
                    <template #header>
                      合计
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="合计=预算工程量*(主材费+辅料费+人工费)*(1+损耗率)"
                        placement="top"
                      >
                        <el-button type="primary" link>
                          <el-icon style="color: #909399"><QuestionFilled /></el-icon>
                        </el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="projectVal" label="预算工程量" width="135">
                    <template #default="scope">
                      <p v-if="DETAIL.isShowLost === 1 && props.optionInfo.currTempObj.budgetType === 2" class="f12">
                        耗损率：{{ scope.row.lostRate }}%
                      </p>
                      <el-input
                        v-else
                        placeholder="请输入"
                        v-model="scope.row.projectVal"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                        @change="updateCustomerSpaceQuotaFun(scope.row)"
                      ></el-input>
                      <!-- 耗损率显示成一列但不显示列，套餐的时候，在此处显示 -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="props.optionInfo.currTempObj.budgetType === 2"
                    prop="limitProjectVal"
                    show-overflow-tooltip
                    label="限制工程数量"
                    width="135"
                  >
                    <template #default="scope">
                      <!-- 任何情况下，都不允许修改 -->
                      <p>{{ scope.row.limitProjectVal }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" width="280">
                    <template #default="scope">
                      <RemarkEditor
                        v-model="scope.row.remark"
                        :title="'修改备注'"
                        :isEdit="true"
                        @submit="updateCustomerSpaceQuotaFun(scope.row)"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="80">
                    <template #default="scope">
                      <el-button type="danger" link @click="deleteSpaceQuotaFun(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="tips">
                  <p>
                    <span class="label">备注说明</span>
                    <RemarkEditor
                      v-model="item.remark"
                      :title="'修改备注'"
                      :isEdit="true"
                      @submit="updateCustomerSpaceRemarkFun(item)"
                    />
                  </p>
                  <p>
                    增项合计：<i>¥ {{ item.spaceTotalMoney || "-" }}</i>
                  </p>
                </div>

                <div class="block"></div>
              </div>

              <!-- 综合项 -->
              <div class="table-item">
                <header>
                  <p class="title">综合项</p>
                  <div class="btn-wrap">
                    <el-button type="primary" :icon="Plus" link @click="openAllrounDialog('add')"> 添加综合项 </el-button>
                  </div>
                </header>
                <el-table class="jzt-table" :data="allrounList" stripe style="width: 100%; max-height: 500px; overflow-y: auto">
                  <template #empty>
                    <el-empty description="这里暂时什么都没有" />
                  </template>
                  <el-table-column label="序号" type="index" width="60" />
                  <el-table-column prop="itemName" show-overflow-tooltip label="项目名称">
                    <template #default="scope">{{ scope.row.itemName || "-" }}</template>
                  </el-table-column>
                  <el-table-column prop="moneyType" label="属性" width="200">
                    <template #default="scope">{{ scope.row.moneyType === 1 ? "比例费用" : "固定费用" }}</template>
                  </el-table-column>
                  <el-table-column prop="linkTypesDesc" show-overflow-tooltip label="关联报价" width="135" />
                  <el-table-column prop="originItemMoney" show-overflow-tooltip label="基数" width="135" />
                  <el-table-column prop="feeRate" show-overflow-tooltip label="单价/比例" width="135" />
                  <el-table-column prop="itemMoney" show-overflow-tooltip label="总价" width="135"> </el-table-column>
                  <el-table-column prop="remark" show-overflow-tooltip label="说明备注" width="160">
                    <template #default="scope">{{ scope.row.remark || "-" }}</template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                      <el-button type="primary" link @click="openAllrounDialog('edit', scope.row)">编辑</el-button>
                      <el-button
                        type="danger"
                        link
                        @click="
                          () => {
                            _isOpenDel2 = true;
                            currAllrounDelCopy = { ...scope.row };
                          }
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- 管理费、税金费用 -->
              <div class="price-wrap">
                <div class="price-item mr100">
                  <div>
                    <el-tooltip class="box-item" effect="dark" content="房屋测量总面积" placement="top">
                      <el-button type="primary" link>
                        <el-icon style="color: #909399"><QuestionFilled /></el-icon>
                      </el-button>
                    </el-tooltip>
                    <h3>房屋测量总面积</h3>
                  </div>
                  <div>
                    <span class="label">总面积</span>
                    <el-input
                      type="number"
                      v-model="DETAIL.houseArea"
                      placeholder="请输入"
                      :disabled="checkedArea()"
                      @change="updateBudgetQuotationFeeFun"
                    >
                      <template #suffix>㎡</template>
                    </el-input>
                  </div>
                </div>
                <div class="price-item mr100">
                  <div>
                    <el-tooltip class="box-item" effect="dark" content="管理费=预算汇总表中的不含税造价X管理费率" placement="top">
                      <el-button type="primary" link>
                        <el-icon style="color: #909399"><QuestionFilled /></el-icon>
                      </el-button>
                    </el-tooltip>
                    <h3>管理费</h3>
                  </div>
                  <div>
                    <span class="label">比例</span>
                    <el-input
                      type="number"
                      v-model="DETAIL.managerFeeRate"
                      placeholder="请输入"
                      @change="
                        () => {
                          if (Number(DETAIL.managerFeeRate) >= 100 || Number(DETAIL.managerFeeRate) < 0) {
                            ElMessage({
                              message: '耗损率必须大于等于0,小于100',
                              type: 'error'
                            });
                            refresh();
                          } else {
                            updateBudgetQuotationFeeFun();
                          }
                        }
                      "
                    >
                      <template #suffix>%</template>
                    </el-input>
                  </div>
                </div>
                <div class="price-item">
                  <div>
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="税金=(预算汇总表中的不含税造价+综合项+管理费)X税率"
                      placement="top"
                    >
                      <el-button type="primary" link>
                        <el-icon style="color: #909399"><QuestionFilled /></el-icon>
                      </el-button>
                    </el-tooltip>
                    <h3>税金费用</h3>
                  </div>
                  <div>
                    <span class="label">比例</span>
                    <el-input
                      type="number"
                      v-model="DETAIL.taxesRate"
                      placeholder="请输入"
                      @change="
                        () => {
                          if (Number(DETAIL.taxesRate) >= 100 || Number(DETAIL.taxesRate) < 0) {
                            ElMessage({
                              message: '耗损率必须大于等于0,小于100',
                              type: 'error'
                            });
                            refresh();
                          } else {
                            updateBudgetQuotationFeeFun();
                          }
                        }
                      "
                    >
                      <template #suffix>%</template>
                    </el-input>
                  </div>
                </div>
              </div>

              <!-- 预算汇总表 -->
              <div class="table-item">
                <div class="block"></div>
                <header>
                  <p class="title">预算汇总表</p>
                  <div class="btn-wrap">
                    <!-- <el-checkbox v-model="checked" label="显示不含税造价" /> -->
                  </div>
                </header>
                <el-table class="jzt-table" :data="countList" stripe style="width: 100%; max-height: 500px; overflow-y: auto">
                  <template #empty>
                    <el-empty description="这里暂时什么都没有" />
                  </template>
                  <el-table-column label="序号" type="index" width="60" />
                  <el-table-column prop="itemName" label="分类别名" />
                  <el-table-column prop="itemDesc" label="计算明细" />
                  <el-table-column prop="amount" show-overflow-tooltip label="价格" width="300">
                    <template #default="scope">¥{{ scope.row.amount }}</template>
                  </el-table-column>
                </el-table>
                <div class="tips ml0">
                  <p class="ml0">
                    <span class="label" style="font-weight: normal">备注说明</span>
                    <el-input
                      v-model="countDetail.remark"
                      maxlength="200"
                      placeholder="请输入"
                      @change="updateCustomerBudgetRemarkFun(countDetail)"
                    ></el-input>
                  </p>
                </div>
              </div>
            </div>

            <!-- 套餐 -->
            <footer v-if="props.optionInfo.currTempObj.budgetType === 2">
              <div class="top_ex" v-if="DETAIL.isConcludeAmount === 1">
                <el-form-item label="成交金额">
                  <el-input v-model="DETAIL.concludeMoney" @blur="updateConclude">
                    <template #prefix>￥</template>
                  </el-input>
                </el-form-item>
                <el-form-item style="flex: 1" label="备注">
                  <el-input v-model="DETAIL.concludeRemark" @blur="updateConclude" maxlength="400" />
                </el-form-item>
              </div>
              <div class="top">
                <h3>
                  套餐合计：<span style="color: #ff3333">¥{{ DETAIL.budgetTotlalMoney || "-" }}</span>
                  <i class="f12"
                    >（超出{{ DETAIL.overSquareNum || "-" }}平：¥{{ DETAIL.overSquareNumMoney || "-" }} / 个性化增项/配：¥{{
                      DETAIL.customIncreaseMoney || "-"
                    }}
                    / 管理费：¥{{ DETAIL.manageFee || "-" }} / 税金：¥{{ getSJ() }} / 综合项费用：¥{{
                      DETAIL.comprehensiveTotal || "-"
                    }}）</i
                  >
                </h3>
                <el-button type="primary" @click="startContract()">{{
                  optionInfo.currTempObj.contractStatus === null || optionInfo.currTempObj.contractStatus === 4
                    ? "发起合同"
                    : "修改合同"
                }}</el-button>
              </div>
              <div class="bottom">
                <p>
                  套餐价：¥{{ DETAIL.packageUnitPrice || "-" }}元/平（可享受{{ DETAIL.packageSquareNum || "-" }}平/当前{{
                    DETAIL.houseArea || "-"
                  }}平，每多出1平费用为：¥{{ DETAIL.packageOverUnitPrice || "-" }}）
                </p>
                <p>
                  空间：{{ DETAIL.spaceItemNum || "-" }}项 / 综合项：{{ DETAIL.comprehensiveNum || "-" }}项 / 报价项：{{
                    DETAIL.budgetItemNum || "-"
                  }}项
                </p>
                <p>预算编号：{{ DETAIL.budgetCustomNo }}</p>
              </div>
            </footer>

            <!-- 常规清单 -->
            <footer v-else>
              <div class="top_ex" v-if="DETAIL.isConcludeAmount === 1">
                <el-form-item label="成交金额">
                  <el-input v-model="DETAIL.concludeMoney" @blur="updateConclude">
                    <template #prefix>￥</template>
                  </el-input>
                </el-form-item>
                <el-form-item style="flex: 1" label="备注">
                  <el-input v-model="DETAIL.concludeRemark" @blur="updateConclude" maxlength="400" />
                </el-form-item>
              </div>
              <div class="top">
                <h3>
                  合计总造价：<span style="color: #ff3333">¥{{ DETAIL.budgetTotlalMoney || "-" }}</span>
                </h3>
                <el-button type="primary" @click="startContract">{{
                  optionInfo.currTempObj.contractStatus === null || optionInfo.currTempObj.contractStatus === 4
                    ? "发起合同"
                    : "修改合同"
                }}</el-button>
              </div>
              <div class="bottom">
                <p>
                  空间：{{ DETAIL.spaceItemNum || "-" }}项 / 综合项：{{ DETAIL.comprehensiveNum || "-" }}项 / 报价项：{{
                    DETAIL.budgetItemNum || "-"
                  }}项
                </p>
                <p v-if="!DETAIL.contractId">预算编号：{{ DETAIL.budgetCustomNo }}</p>
              </div>
            </footer>
          </template>

          <!-- 属性筛选为空 -->
          <el-empty v-else description="暂无数据" />
        </el-main>
      </el-container>
    </el-container>
    <!-- 删除模板空间 二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenDel"
      :title="'提醒'"
      :message="'您正在删除导入的模板空间，请问是否继续当前操作？'"
      :submitBtnText="'继续'"
      @submit="returnSubmitDel"
    />
    <!-- 删除综合项 二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenDel2"
      :title="'提醒'"
      :message="'您正在删除综合项，请问是否继续当前操作？'"
      :submitBtnText="'继续'"
      @submit="returnSubmitDel2"
    />
    <!-- 删除工程项目 二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenDel3"
      :title="'提醒'"
      :message="'您正在删除工程项目，请问是否继续当前操作？'"
      :submitBtnText="'继续'"
      @submit="returnSubmitDel3"
    />

    <!-- 修改空间名称 -->
    <editNameDialog v-model:isOpen="isOpenEdit" :optionInfo="optionInfoEdit" />

    <!-- 材料工艺详情抽屉 -->
    <materialDrawer v-model:isOpen="materialIsOpen" :optionInfo="optionInfoMaterial" @submitOk="refresh" />

    <!-- 主材辅材明细列表弹窗 -->
    <cailiaoDetailList v-model:isOpen="cailiaoIsOpen" :optionInfo="optionInfoCailiao" @submitOk="refresh" />

    <!-- 人工明细列表弹窗 -->
    <artificialDetailList v-model:isOpen="artificialIsOpen" :optionInfo="optionInfoArtificial" @submitOk="refresh" />

    <!-- 材料-选择商品 -->
    <selectProduct
      :optionInfo="prodOptionInfo"
      @close="prodOptionInfo.isShow = false"
      @submit="
        () => {
          prodOptionInfo.isShow = false;
          refresh();
        }
      "
    />

    <!-- 导入定额模板 -->
    <quota v-model:isOpen="isOpenQuota" :optionInfo="optionInfoQuota" @submitOk="refresh" />

    <!-- 添加、编辑综合项 -->
    <addAllroun v-model:isOpen="allrounIsOpen" :optionInfo="allrounOptionInfo" @submitOk="refresh" />

    <zoneSettingModal v-model="zoneSettingModalFlag" :spaceListParam="spaceListParam" @submit="updateZoneSetting" />

    <!-- 修改合同抽屉 -->
    <contractModal
      v-if="contractModalFlag"
      v-model="contractModalFlag"
      :budgetDetail="DETAIL"
      :customDetail="customInfo"
      :tempDetail="optionInfo.currTempObj"
      @submit="contractHandle"
    />

    <alertDialog v-model="alertDialogFlag" :detail="alertDetail" @commit="submitApproval"></alertDialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { MoreFilled, Plus, QuestionFilled } from "@element-plus/icons-vue";
import selectProduct from "./selectProduct.vue"; //导入材料-选择商品sku
import quota from "./quota.vue"; //导入定额模板
import materialDrawer from "./materialDetail.vue"; //材料工艺详情抽屉
import cailiaoDetailList from "./cailiaoDetailList.vue"; //主材、辅材明细
import artificialDetailList from "./artificialDetailList.vue"; //人工明细
import addAllroun from "./addAllroun.vue"; //添加、编辑综合项
import zoneSettingModal from "./zoneSettingModal.vue";
import contractModal from "./contractModal.vue";
import alertDialog from "./alertDialog.vue";
import {
  getBudgetDetail,
  spaceQueryUpdateName,
  spaceQueryCopy,
  spaceQueryDel,
  getMainProductsByContentId,
  getAuxiliaryProductsByContentId,
  getWorkerListByContentId,
  comprehensiveDel,
  updateBudgetQuotationFee,
  getSummary,
  updateCustomerSpaceQuota,
  inventoryAddCustom,
  packageAddCustom,
  updateCustomerSpaceRemark,
  updateCustomerBudgetRemark,
  deleteSpaceQuota,
  packageMainMaterial,
  getSpaceParamList,
  updateSpaceParam,
  updateContract,
  createContract,
  updateConcludeInfo,
  checkgrossProfitRate,
  commitApproval
} from "@/apis/quote-price/following";
import editNameDialog from "./editNameDialog.vue";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import useCodeArrStore from "@/store/modules/select";
import RemarkEditor from "@/components/RemarkEditor";

const emits = defineEmits(["refreshTempList"]);

const spaceTableRef = ref();
const containerRef = ref();
const tableRef = ref();
const spaceList = ref([]);
const allrounList = ref([]); //综合项
const selectedObj = ref({ itemId: null });
const tableList = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
const newList = ref([]); //新建空间
const newRemark = ref("");
const countList = ref([]); //预算汇总表
const countListCopy = ref([]); //预算汇总表
const checked = ref(true); //显示不含税造价
const countRemark = ref(""); //预算汇总备注
const prodOptionInfo = ref({ isShow: false }); //材料-商品sku选择弹窗
const isOpenQuota = ref(false); //导入定额模板
const optionInfoQuota = ref({ type: 1 });
const materialIsOpen = ref(false); //材料工艺详情抽屉
const optionInfoMaterial = ref({ type: "edit", detail: {} });
const cailiaoIsOpen = ref(false); //主材辅材明细列表弹窗
const optionInfoCailiao = ref({ type: "zhu", detail: {} });
const artificialIsOpen = ref(false); //人工明细列表弹窗
const optionInfoArtificial = ref({ detail: {} });
const allrounIsOpen = ref(false); //添加、编辑综合项弹窗
const allrounOptionInfo = ref({ type: "add", detail: {}, spaceList: [], currTempObj: {} });
const isOpenEdit = ref(false); //修改模板名字弹窗
const optionInfoEdit = ref({ detail: {} }); //修改模板名字详情obj
const currSpaceDelCopy = ref({});
const _isOpenDel = ref(false); //删除导入的模板 二次确认
const _isOpenDel2 = ref(false); //删除综合项 二次确认
const _isOpenDel3 = ref(false); //删除工程项目 二次确认
const currAllrounDelCopy = ref({});
const unitList = ref(useCodeArrStore().getDict("shop_unit", "num"));
const loading = ref(false);
const zoneSettingModalFlag = ref(false);
const spaceListParam = ref([]);
const contractModalFlag = ref(false);
const alertDialogFlag = ref(false);

const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        currTempObj: {} //选中的模板obj
      };
    }
  },
  customInfo: {
    type: Object,
    default: () => {
      return {
        currTempObj: {} //选中的模板obj
      };
    }
  }
});

watch(
  () => props.optionInfo.currTempObj,
  val => {
    // console.log("传递过来的当前模板", val, useCodeArrStore().getDict("shop_unit"));

    getBudgetDetailFun(true); //查询当前模板的报价明细

    openzoneSettingModal(false); //查询空间尺寸数据设置
  },
  { deep: true, immediate: false }
);
watch(
  () => checked.value,
  val => {
    if (!val) {
      countList.value = countListCopy.value.filter(item => item.itemName !== "不含税造价");
    } else {
      countList.value = countListCopy.value;
    }
  },
  { deep: true, immediate: false }
);

const handleClick = e => {
  e.preventDefault();
};

// 检查房屋测量面积是否允许输入-空间尺寸数据设置table中，任意一条数据的空间尺寸数据“面积“列的数据大于等于0时，外面的房屋测量面积输入框都禁用
const checkedArea = () => {
  let flag = false;
  spaceListParam.value.map(item => {
    if (item.area && Number(item.area) > 0) {
      flag = true;
    }
  });
  return flag;
};

const scrollFun = e => {
  const scrollTop = e.target.scrollTop;
  const TOPheight = 660;

  let index = 0;
  if (scrollTop <= 580) {
    // console.log("定位到0", scrollTop);
  } else {
    index = Math.ceil((scrollTop - 582) / TOPheight);
    // console.log("定位到", index, scrollTop);
  }
  selectedObj.value = spaceList.value[index];
};

//footer税金
const getSJ = () => {
  const obj = countList.value.find(item => item.itemName === "税金");
  if (obj) {
    return obj.amount;
  } else {
    return 0;
  }
};

//重置当前选中的空间obj
const resetCurrSpaceObj = () => {
  selectedObj.value = { itemId: null };
};

//删除工程项目
const currSpaceQuotaDel = ref({});
const deleteSpaceQuotaFun = item => {
  currSpaceQuotaDel.value = item;
  _isOpenDel3.value = true;
};

//修改空间备注
const updateCustomerSpaceRemarkFun = item => {
  updateCustomerSpaceRemark({
    spaceId: item.spaceId,
    remark: item.remark
  })
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "空间备注修改成功",
          type: "success"
        });
        refresh();
      } else {
        //更新失败
        refresh();
      }
    })
    .catch(err => {
      //更新失败
      refresh();
    });
};
//修改预算汇总备注
const updateCustomerBudgetRemarkFun = item => {
  updateCustomerBudgetRemark({
    budgetId: props.optionInfo.currTempObj.budgetId,
    remark: item.remark
  })
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "报价单预算汇总备注修改成功",
          type: "success"
        });
        refresh();
      } else {
        //更新失败
        refresh();
      }
    })
    .catch(err => {
      //更新失败
      refresh();
    });
};

//新增-自定义额度
const inventoryAddCustomFun = (item, domId) => {
  if (props.optionInfo.currTempObj.budgetType === 2) {
    packageAddCustom({
      spaceId: item.spaceId,
      budgetId: props.optionInfo.currTempObj.budgetId
    }).then(async res => {
      if (res.code === 200) {
        await refresh();
        const dom = document.querySelector(`#${domId} .el-table`); //el-scrollbar__wrap
        dom.scrollTo({
          top: 99999,
          behavior: "smooth"
        }); // smooth滚动效果
      }
    });
  } else {
    inventoryAddCustom({
      spaceId: item.spaceId,
      budgetId: props.optionInfo.currTempObj.budgetId
    }).then(async res => {
      if (res.code === 200) {
        await refresh();
        const dom = document.querySelector(`#${domId} .el-table`); //el-scrollbar__wrap
        dom.scrollTo({
          top: 99999,
          behavior: "smooth"
        }); // smooth滚动效果
      }
    });
  }
};

//更新定额项目
const updateCustomerSpaceQuotaFun = item => {
  updateCustomerSpaceQuota({ ...item })
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "修改成功",
          type: "success"
        });
        refresh();
      } else {
        //更新失败
        refresh();
      }
    })
    .catch(err => {
      //更新失败
      refresh();
    });
};

//查询预算汇总表单
const countDetail = ref({});
const getSummaryFun = async () => {
  await getSummary({ budgetId: props.optionInfo.currTempObj.budgetId }).then(res => {
    if (res.code === 200) {
      checked.value = true;
      countDetail.value = res.data;
      countList.value = res.data.itemList;
      countListCopy.value = res.data.itemList;
    }
  });
};

//修改房屋面积、管理费、税金费用
const updateBudgetQuotationFeeFun = () => {
  updateBudgetQuotationFee({
    budgetId: props.optionInfo.currTempObj.budgetId,
    houseArea: DETAIL.value.houseArea,
    managerFeeRate: DETAIL.value.managerFeeRate,
    taxesRate: DETAIL.value.taxesRate
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "修改成功",
        type: "success"
      });
      refresh();
    }
  });
};

//查询主材、辅材明细列表 type 1-主材 2-辅材材
const getProductsByContentIdFun = async (item, type = 1, code) => {
  // console.log("重新查询明细接口", type, item.mainProductShowType, item.auxiliaryProductShowType);
  if ((type === 1 && item.mainProductShowType === 2) || (type === 2 && item.auxiliaryProductShowType === 2)) {
    //主材mainProductShowType 辅材auxiliaryProductShowType :1-具体商品 2-条件组合

    await packageMainMaterial({
      productType: type, //1-主材 2-辅材材
      budgetId: props.optionInfo.currTempObj.budgetId,
      contentId: item.contentId,
      code
    }).then(res => {
      if (res.code === 200) {
        optionInfoCailiao.value.currTempObj = props.optionInfo.currTempObj; //选中的模板obj
        optionInfoCailiao.value.dialogType = "ys"; //ys-预算报价  de-定额模板
        optionInfoCailiao.value.actionType = "edit";
        optionInfoCailiao.value.type = type === 1 ? "zhu" : "fu";
        optionInfoCailiao.value.project = { ...item };
        optionInfoCailiao.value.detail = { ...res.data, contentId: item.contentId, _time: new Date().getTime() };
        optionInfoCailiao.value.getDetailList = getProductsByContentIdFun;
      }
    });
  } else if ((type === 1 && item.mainProductShowType === 1) || (type === 2 && item.auxiliaryProductShowType === 1)) {
    //非条件组合
    if (type === 1) {
      //主材明细
      await getMainProductsByContentId({ contentId: item.contentId }).then(res => {
        if (res.code === 200) {
          console.log("主材明细", res.data);
          optionInfoCailiao.value.currTempObj = props.optionInfo.currTempObj; //选中的模板obj
          optionInfoCailiao.value.dialogType = "ys"; //ys-预算报价  de-定额模板
          optionInfoCailiao.value.actionType = "edit";
          optionInfoCailiao.value.type = "zhu";
          optionInfoCailiao.value.project = { ...item };
          optionInfoCailiao.value.detail = { ...res.data, contentId: item.contentId, _time: new Date().getTime() };
          optionInfoCailiao.value.getDetailList = getProductsByContentIdFun;
        }
      });
    } else {
      //辅材明细
      await getAuxiliaryProductsByContentId({ contentId: item.contentId }).then(res => {
        if (res.code === 200) {
          console.log("辅材明细", res.data);
          optionInfoCailiao.value.currTempObj = props.optionInfo.currTempObj; //选中的模板obj
          optionInfoCailiao.value.dialogType = "ys"; //ys-预算报价  de-定额模板
          optionInfoCailiao.value.actionType = "edit";
          optionInfoCailiao.value.type = "fu";
          optionInfoCailiao.value.project = { ...item };
          optionInfoCailiao.value.detail = { ...res.data, contentId: item.contentId, _time: new Date().getTime() };
          optionInfoCailiao.value.getDetailList = getProductsByContentIdFun;
        }
      });
    }
  } else {
    if (type === 1) {
      //主材明细
      optionInfoCailiao.value.currTempObj = props.optionInfo.currTempObj; //选中的模板obj
      optionInfoCailiao.value.dialogType = "ys"; //ys-预算报价  de-定额模板
      optionInfoCailiao.value.actionType = "edit";
      optionInfoCailiao.value.type = "zhu";
      optionInfoCailiao.value.project = { ...item };
      optionInfoCailiao.value.detail = { contentId: item.contentId, _time: new Date().getTime() };
      optionInfoCailiao.value.getDetailList = getProductsByContentIdFun;
    } else {
      //辅材明细
      optionInfoCailiao.value.currTempObj = props.optionInfo.currTempObj; //选中的模板obj
      optionInfoCailiao.value.dialogType = "ys"; //ys-预算报价  de-定额模板
      optionInfoCailiao.value.actionType = "edit";
      optionInfoCailiao.value.type = "fu";
      optionInfoCailiao.value.project = { ...item };
      optionInfoCailiao.value.detail = { contentId: item.contentId, _time: new Date().getTime() };
      optionInfoCailiao.value.getDetailList = getProductsByContentIdFun;
    }
  }
};

//查询人工明细列表
const getWorkerListByContentIdFun = item => {
  getWorkerListByContentId({ contentId: item.contentId }).then(res => {
    if (res.code === 200) {
      console.log("人工明细", res.data);

      optionInfoArtificial.value.currTempObj = props.optionInfo.currTempObj; //1-常规  2-套餐
      optionInfoArtificial.value.dialogType = "ys"; //ys-预算报价  de-定额模板
      optionInfoArtificial.value.actionType = "edit";
      optionInfoArtificial.value.detail = { ...res.data, contentId: item.contentId, _time: new Date().getTime() };
    }
  });
};

//打开工艺材料说明
const openMaterialDialog = item => {
  materialIsOpen.value = true;
  optionInfoMaterial.value.type = item.canEditStandard === 1 ? "edit" : item.canEditStandard === 0 ? "view" : "edit";
  optionInfoMaterial.value.detail = { ...item, _time: new Date().getTime() };
};

//组件回调-刷新详情
const refresh = async () => {
  await getBudgetDetailFun(); //刷新详情
};

//打开材料明细 type 1-主材 2-辅材材
const openCailiaoDialog = (item, type = 1) => {
  cailiaoIsOpen.value = true;
  getProductsByContentIdFun(item, type);
};
//打开人工明细
const openArtificialDialog = item => {
  artificialIsOpen.value = true;
  getWorkerListByContentIdFun(item);
};

//打开新增/编辑综合项
const openAllrounDialog = (type = "add", item) => {
  allrounOptionInfo.value.type = type;
  allrounOptionInfo.value.spaceList = spaceList.value;
  allrounOptionInfo.value.currTempObj = props.optionInfo.currTempObj;
  allrounIsOpen.value = true;
  allrounOptionInfo.value.detail = { ...item, _time: new Date().getTime() };
};

/**删除工程项目 */
const returnSubmitDel3 = () => {
  deleteSpaceQuota({
    contentId: currSpaceQuotaDel.value.contentId
  })
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        _isOpenDel3.value = false;
        refresh();
      } else {
        //更新失败
        refresh();
      }
    })
    .catch(err => {
      //更新失败
      refresh();
    });
};

/**删除综合项 */
const returnSubmitDel2 = () => {
  comprehensiveDel({
    itemId: currAllrounDelCopy.value.itemId
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "综合项删除成功",
        type: "success"
      });
      _isOpenDel2.value = false;
      getBudgetDetailFun();
    }
  });
};
/**删除空间 */
const returnSubmitDel = () => {
  spaceQueryDel({
    spaceId: currSpaceDelCopy.value.spaceId,
    budgetId: props.optionInfo.currTempObj.budgetId
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "空间删除成功",
        type: "success"
      });
      _isOpenDel.value = false;
      getBudgetDetailFun();
    }
  });
};

/**复制空间 */
const spaceQueryCopyFun = () => {
  spaceQueryCopy({
    spaceId: currSpaceDelCopy.value.spaceId,
    budgetId: props.optionInfo.currTempObj.budgetId
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "空间复制成功",
        type: "success"
      });
      getBudgetDetailFun();
    }
  });
};

/**修改空间的名字 */
const spaceQueryUpdateNameFun = async data => {
  await spaceQueryUpdateName({
    spaceId: optionInfoEdit.value.detail.spaceId,
    budgetId: props.optionInfo.currTempObj.budgetId,
    spaceName: data.name
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "空间名称修改成功",
        type: "success"
      });
      getBudgetDetailFun();
    }
  });
};

const DETAIL = ref({});
/**查询当前模板的报价明细 */
const getBudgetDetailFun = async (resetTop = false) => {
  if (!props.optionInfo.currTempObj.budgetId) return;
  loading.value = true;
  await getBudgetDetail({ budgetId: props.optionInfo.currTempObj.budgetId })
    .then(res => {
      if (res.code === 200) {
        console.log("报价明细详情===", res);
        DETAIL.value = res.data;
        spaceList.value = res.data.spaceList || []; //空间列表
        allrounList.value = res.data.comprehensiveList || []; //综合项列表

        if (resetTop) {
          setTimeout(() => {
            tableRef.value[0].scrollIntoView({ behavior: "auto" }); // smooth滚动效果
          }, 500);
        }
      }
    })
    .finally(() => {
      loading.value = false;
    });

  //查询预算汇总
  await getSummaryFun();
};

/**
 * 打开导入材料-sku选择弹窗
 */
const openSelectProd = item => {
  prodOptionInfo.value.isShow = true;
  prodOptionInfo.value.spaceId = item.spaceId;
  prodOptionInfo.value.currTempObj = props.optionInfo.currTempObj;
  prodOptionInfo.value.budgetId = props.optionInfo.currTempObj.budgetId;
  prodOptionInfo.value.type = props.optionInfo.currTempObj.budgetType;
};

/**
 * 打开导入定额模板抽屉
 */
const openQuota = item => {
  isOpenQuota.value = true;
  optionInfoQuota.value.spaceId = item.spaceId;
  optionInfoQuota.value.budgetId = props.optionInfo.currTempObj.budgetId;
  optionInfoQuota.value.type = props.optionInfo.currTempObj.budgetType;
};

const openzoneSettingModal = async (isOpen = true) => {
  if (!props.optionInfo.currTempObj.budgetId) return;
  let { data } = await getSpaceParamList(props.optionInfo.currTempObj.budgetId);
  spaceListParam.value = data;
  console.log("空间尺寸数据设置", spaceListParam.value);
  if (isOpen) zoneSettingModalFlag.value = true;
};

const alertDetail = ref();
const startContract = async () => {
  let { data } = await checkgrossProfitRate({ budgetId: DETAIL.value.budgetId });
  if (data.result) {
    DETAIL.value.budgetTemplateId = props.optionInfo.currTempObj.templateId;
    contractModalFlag.value = true;
  } else {
    alertDetail.value = data;
    alertDialogFlag.value = true;
  }
};

const submitApproval = async () => {
  let { code } = await commitApproval({ budgetId: DETAIL.value.budgetId });
  if (code === 200) alertDialogFlag.value = false;
};

const updateZoneSetting = async item => {
  let { code } = await updateSpaceParam(item);
  if (code === 200) {
    ElMessage({ message: "保存成功", type: "success" });
    zoneSettingModalFlag.value = false;
    refresh();
  }
};

const contractHandle = async item => {
  let res;
  if (item.contractId && item.status !== 4) {
    res = await updateContract(item);
  } else {
    item.contractId && delete item.contractId;
    res = await createContract(item);
  }
  if (res.code === 200) {
    ElMessage({ message: `${item.contractId ? "保存" : "修改"}成功`, type: "success" });
    contractModalFlag.value = false;
    refresh();
    emits("refreshTempList");
  }
};

const updateConclude = async () => {
  let { code } = await updateConcludeInfo({
    budgetId: DETAIL.value.budgetId,
    concludeMoney: DETAIL.value.concludeMoney,
    concludeRemark: DETAIL.value.concludeRemark
  });
  if (code === 200) {
    ElMessage({ message: "修改成功", type: "success" });
    refresh();
  }
};

defineExpose({ resetCurrSpaceObj, startContract });
</script>

<style lang="scss">
.space-actionmore {
  min-width: auto !important;
  width: 120px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  .el-button {
    width: 100%;
    justify-content: flex-start !important;
    line-height: 26px !important;
    font-size: 12px !important;
  }
}
</style>
<style lang="scss" scoped>
:deep(.remark-editor) {
  .text-wrap {
    .el-button.el-button--primary.is-link {
      color: #213270;
    }
  }
}
:deep(.tips.el-button) {
  &.is-link {
    cursor: default;
  }
  &.is-link.el-button--success:hover {
    color: #67c23a;
    cursor: default;
  }
  &.is-link.el-button--warning:hover {
    color: #e6a23c;
    cursor: default;
  }
  &.is-link.el-button--danger:hover {
    color: #ff3333;
    cursor: default;
  }
}
.el-button--primary.is-link.underline {
  border-radius: 0;
  border-bottom: 1px solid #213270;
}
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}

// 合同抽屉-输入框样式控制
:deep(.el-select__wrapper.is-disabled) {
  background-color: white !important ;
}
:deep(.el-input.is-disabled) {
  .el-input__wrapper {
    background-color: white !important ;
  }
}
//end

.flex-wrap {
  display: flex;
  align-items: center;
  & > div:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
  }
  & > div:nth-of-type(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
:deep(.inner-container.el-container) {
  height: 100%;
  .el-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
    height: 52px;
    border-bottom: 1px solid #e1e6ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 10px 0 0;
    .title {
      color: #3d3d3d;
      font-weight: bold;
    }
  }
  .el-container {
    height: calc(100% - 52px);
    background-color: white;
    position: relative;
  }
  .el-aside {
    .title {
      padding: 30px 20px 10px 20px;
      color: #3d3d3d;
      font-weight: bold;
    }
    .space-list {
      .el-anchor__list {
        padding-left: 0;
      }
      .el-anchor__marker {
        display: none;
      }
      .space-item {
        // padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f2f3f5;
        a.el-anchor__link {
          padding: 10px 0 10px 20px;
          width: 100%;
          box-sizing: border-box;
          display: flex;
          &.is-active {
            background-color: #424e66;
            & > span {
              color: white;
            }
          }
          & > .el-button {
            width: 26px;
          }
          & > span {
            flex: 1;
            position: relative;
            width: 0;
            color: #5c5c5c;
          }
        }
        .el-button {
          color: #86909c;
          padding-right: 10px;
          & > span {
            transform: rotate(90deg);
          }
        }
        &.active {
          background-color: #424e66;
          & > a {
            color: white;
          }
        }
      }
    }
  }
  .el-main {
    border-left: 1px solid #e1e6ed;
    padding: 20px 0 0 0;
    .title {
      color: #3d3d3d;
      font-weight: bold;
    }
    .table-wrap {
      padding: 0 20px 0 20px;
      height: 100%;
      overflow-y: auto;
      .table-item {
        .el-table__cell {
          position: relative;
        }
        header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          & > p {
            font-size: 18px;
            color: #3d3d3d;
            span {
              color: #86909c;
            }
          }
          .el-button {
            color: #213270;
          }
        }
        .tips {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          & > p {
            display: flex;
            align-items: center;
            &:first-of-type {
              flex: 1;
            }
            &:last-of-type {
              margin-left: 38px;
              font-weight: bold;
              i {
                font-style: normal;
                color: #ff3333;
              }
            }
            .label {
              width: 70px;
            }
            .el-input {
              width: 100%;
            }
          }
        }
        .block {
          height: 20px;
          background-color: #f5f7fa;
          margin: 32px -20px;
        }
      }
    }
    .price-wrap {
      display: flex;
      .price-item {
        & > div:nth-of-type(1) {
          display: flex;
          font-size: 18px;
          color: #3d3d3d;
          margin: 20px 0 20px 0;
          h3 {
            font-weight: normal;
            margin-left: 10px;
          }
        }
        & > div:nth-of-type(2) {
          display: flex;
          align-items: center;
          .label {
            width: 80px;
          }
        }
      }
    }

    footer {
      position: absolute;
      background-color: white;
      bottom: 0px;
      right: 0px;
      width: calc(100% - 201px);
      z-index: 22;
      box-sizing: border-box;
      box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
      padding: 10px 0px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .top_ex {
        display: flex;
        gap: 20px;
        padding: 0 20px;
        border-bottom: 1px solid #c2d4e8;
        .el-form-item {
          margin-bottom: 10px;
        }
      }
      .top,
      .bottom {
        padding: 0 20px;
      }
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        margin-top: 10px;
        i {
          font-style: normal;
          color: #3d3d3d;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
